<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>主页</title>
    <!-- 引入样式 -->
    <link rel="shortcut icon" href="static/asert/img/favicon.ico" mce_href="static/asert/img/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="static/asert/element-ui/css/index.css">
    <!-- 引入样式 -->
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="static/asert/font-awesome-4.7.0/css/font-awesome.min.css">
    <style rel="stylesheet" type="text/css">
        a{
            color: #419EFF;
            text-decoration: none;
        }
        body{
            color: #666;
            padding: 0;
            margin: 0;
        }
        .header{
            background-color: #2F4050;
            color: #fff;
        }
        .header-logo {
            display: block;
            height: 100%;
            float: left;
            line-height: 60px;
            color: #fff;
            font-family: '华文楷体';
            font-size: large;
        }
        .header-menu{
            display: block;
            height: 100%;
            float: left;
            margin-left: 100px;
            line-height: 60px;
        }
        .page-aside{
            background-color: #545c64;
            color: #fff;
        }
        .page-main{
            background-color: whitesmoke;
        }
        .left-menu{
            border-right: 0;
        }
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
        }
        .page-aside:not(.aside--collapse){
            width: 60px;
        }
        .logo{
            width: 64px;
            text-align: center;
            margin-left: -20px;
        }
    </style>
</head>
<body>
    <div id="index">
        <el-container>
            <el-header class="header">
                <div class="header-logo logo">
                    <i class="el-icon-menu" @click="handleMenu"></i>
                </div>
                <a href="javascript:;" class="header-logo"> xx科技有限公司  xx：<@shiro.principal/></a>
                <!--<div class="header-menu">-->
                    <!--登录用户位置-->
                <!--</div>-->
                <div class="header-menu">
                    <el-menu
                            :default-active="activeIndex"
                            class="el-menu-demo"
                            mode="horizontal"
                            @select="handleSelect"
                            background-color="#2F4050"
                            text-color="#fff"
                            active-text-color="#ffd04b">
                        <el-menu-item index="1">项目信息</el-menu-item>
                        <el-menu-item index="main">产品信息</el-menu-item>
                        <el-menu-item index="2">库存管理</el-menu-item>
                        <el-submenu index="3">
                            <template slot="title">
                                <span>系统管理</span>
                            </template>
                            <el-menu-item index="1-1">修改密码</el-menu-item>
                            <el-menu-item index="1-2">用户角色管理</el-menu-item>
                            <el-menu-item index="1-3">角色权限管理</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </div>
            </el-header>
            <el-container>
                <!--<el-aside class="page-aside" width="225px">-->
                    <el-menu
                            :default-active="activeIndex"
                            class="el-menu-vertical-demo left-menu"
                            @select="handleSelect"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            :collapse="isCollapse">
                        <el-menu-item index="1">
                            <i class="el-icon-more"></i>
                            <span slot="title">项目信息</span>
                        </el-menu-item>
                        <el-menu-item index="main">
                            <i class="el-icon-star-off"></i>
                            <span slot="title">产品信息</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-document"></i>
                            <span slot="title">库存管理</span>
                        </el-menu-item>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-setting"></i>
                                <span>系统管理</span>
                            </template>
                            <el-menu-item index="1-1">修改密码</el-menu-item>
                            <el-menu-item index="1-2">用户角色管理</el-menu-item>
                            <el-menu-item index="1-3">角色权限管理</el-menu-item>
                        </el-submenu>
                    </el-menu>
                <!--</el-aside>-->
                <el-main class="page-main" :style="{'min-height':minPageHeight+'px'}">
                    <div id="main-box"></div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</body>
<script src="static/asert/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="static/asert/js/ajax.js"></script>
<script src="static/page/index.js"></script>
<script src="static/asert/element-ui/vue.js"></script>
<!-- import JavaScript -->
<script src="static/asert/element-ui/index.js"></script>
<script>
    new Vue({
        el: '#index',
        data: function() {
            return {
                visible: false,
                tableData: [],
                activeIndex: "main",
                isCollapse: true,
                minPageHeight:0
            }
        },
        mounted:function () {
            var me =this;
            $("#main-box").load(this.activeIndex);
            me.initMinPageHeight();
            window.onresize = function () {
                me.initMinPageHeight();
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                this.activeIndex = key;
                $("#main").load(key);
                console.log(key, keyPath);
            },
            handleMenu(){
                if(this.isCollapse){
                    this.isCollapse = false;
                }else {
                    this.isCollapse = true;
                }
            },
            initMinPageHeight(){
                this.minPageHeight = $(window).height() - $(".page-main").offset().top;
            }
        }
    })
</script>
</html>